<template>
  <div id="index">
    <div id="container">

      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">{{ this.serviceType == 'service' ?
              '服务项目信息' : '套餐卡信息' }}</em>
          </div>

          <el-row>
            <el-col :span="8">
              <el-form-item :label="this.serviceType == 'service' ? '项目名称' : '套餐卡名称'">
                <span class="show-desc-txt">{{ this.serviceType == 'service' ? form.serviceItemName : form.cardName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8"
              v-if="this.serviceType == 'service'">
              <el-form-item label="sku">
                <span class="show-desc-txt">{{ form.skuName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买金额">
                <span class="show-desc-txt">{{ form.salePriceStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="总次数">
                <span class="show-desc-txt"> {{ form.isUnLimit == '1' ? '不限制' : form.times }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="已使用">
                <span class="show-desc-txt">{{ form.subscribeTimes }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="可使用">
                <span class="show-desc-txt">{{ form.isUnLimit == '1' ? '不限制' : form.times * 1 - form.subscribeTimes * 1 }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="购买门店">
                <span class="show-desc-txt">{{ form.storeName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="卡包类型">
                <span class="show-desc-txt">{{ form.serviceTypeStr }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="服务类别">
                <span class="show-desc-txt">{{ form.serviceItemTypeStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <span class="show-desc-txt">{{ form.customerName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="联系电话">
                <span class="show-desc-txt">{{ form.phone }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="客户性别">
                <span class="show-desc-txt">{{ form.sexStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号">
                <span class="show-desc-txt">{{ form.orderNo }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="订单金额">
                <span class="show-desc-txt">{{ form.orderAmountStr }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="购买时间">
                <span class="show-desc-txt">{{ form.payTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="现金支付">
                <span class="show-desc-txt">{{ form.payAmountStr }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="购买金币">
                <span class="show-desc-txt">{{ form.payByBalanceStr }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="购买银币">
                <span class="show-desc-txt">{{ form.payByRedBagStr }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="上次退卡人">
                <span class="show-desc-txt">{{ form.retreatName }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="退卡次数">
                <span class="show-desc-txt">{{ form.retreatTimes }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="退卡时间">
                <span class="show-desc-txt">{{ form.retreatDate }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="退卡备注">
                <span class="show-desc-txt">{{ form.retreatRemark }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="退款">
                <span v-for="(item, idx) in form.fundDetailList"
                  :key="idx"
                  style="margin-right: 5px">
                  {{item.bizDesc}}: {{item.amountStr}}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <template v-if="!see">
          <div class="product-div-two"
            v-if="this.serviceType == 'service'">
            <div class="product-header">
              <em style="font-size: 18px;font-style: normal;"
                class="big_title_style">退卡信息</em>
            </div>
            <div style="width: 100%">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="退卡次数"
                    prop="retreatTimeStr"
                    style="margin-bottom: 10px">
                    <el-input-number style="width:100%;"
                      :controls="false"
                      :step="1"
                      :min="0"
                      :max="form.isUnLimit == '1' ? 1 : form.times * 1 - form.subscribeTimes * 1"
                      v-model="form.retreatTimeStr">
                    </el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="退款金币"
                    prop="retreatByBalanceStr"
                    style="margin-bottom: 10px">
                    <el-input-number style="width:100%;"
                      :precision="2"
                      :controls="false"
                      :step="0.1"
                      :min="0"
                      :max="this.maxMoney('1')"
                      v-model="form.retreatByBalanceStr">
                    </el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="退款银币"
                    prop="retreatByRedBagStr"
                    style="margin-bottom: 10px">
                    <el-input-number style="width:100%;"
                      :precision="2"
                      :controls="false"
                      :step="0.1"
                      :min="0"
                      :max="this.maxMoney('2')"
                      v-model="form.retreatByRedBagStr">
                    </el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="退卡备注"
                    prop="retreatRemark">
                    <el-input style="width:100%;"
                      v-model="form.retreatRemark">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>

          <div class="product-div-two"
            v-if="this.serviceType == 'card'"
            style="padding: 10px 18px 20px;">

            <div style="width: 100%;">

              <el-tabs v-model="activeName">
                <el-tab-pane label="退服务项目"
                  name="first">
                  <el-table :data="form.childrenList"
                    border>
                    <el-table-column prop="serviceItemName"
                      align="center"
                      label="服务项目">
                    </el-table-column>
                    <el-table-column prop="skuName"
                      align="center"
                      label="sku名称">
                    </el-table-column>
                    <el-table-column prop="salePriceStr"
                      align="center"
                      label="金额">
                    </el-table-column>
                    <el-table-column label="总次数"
                      align="center"
                      prop="times"
                      width="80px" />
                    <el-table-column label="使用次数"
                      align="center"
                      prop="subscribeTimes"
                      width="80px">
                      <template slot-scope="scope">
                        {{ scope.row.subscribeTimes }}
                      </template>
                    </el-table-column>
                    <el-table-column label="可用次数"
                      align="center"
                      prop="subscribeTimes"
                      width="80px">
                      <template slot-scope="scope">
                        {{ scope.row.isUnLimit == '1' ? '不限制' : scope.row.times * 1 - scope.row.subscribeTimes * 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="serviceTimes"
                      align="center"
                      label="退卡次数">
                      <template slot-scope="scope">
                        <el-input-number style="width:100%;"
                          :controls="false"
                          :step="1"
                          :min="0"
                          :max="scope.row.isUnLimit == '1' ? 1 : scope.row.times * 1 - scope.row.subscribeTimes * 1"
                          v-model="scope.row.retreatTimeStr">
                        </el-input-number>
                      </template>
                    </el-table-column>

                    <el-table-column prop="serviceTimes"
                      align="center"
                      label="退款金币">
                      <template slot-scope="scope">
                        <el-input-number style="width:100%;"
                          :precision="2"
                          :controls="false"
                          :step="0.01"
                          :min="0"
                          :max="maxMoneyArr(scope.$index, '1')"
                          v-model="scope.row.retreatByBalanceStr">
                        </el-input-number>
                      </template>
                    </el-table-column>

                    <el-table-column prop="serviceTimes"
                      align="center"
                      label="退款银币">
                      <template slot-scope="scope">
                        <el-input-number style="width:100%;"
                          :precision="2"
                          :controls="false"
                          :step="0.01"
                          :min="0"
                          :max="maxMoneyArr(scope.$index, '2')"
                          v-model="scope.row.retreatByRedBagStr">
                        </el-input-number>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="退套餐卡"
                  name="second">
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                      <el-form-item label="退卡次数"
                        prop="retreatTimeStr"
                        label-width="102px">
                        <el-input-number :controls="false"
                          :step="1"
                          :min="0"
                          disabled
                          style="width:100%;"
                          :max="form.isUnLimit == '1' ? 1 : form.times * 1 - form.subscribeTimes * 1"
                          v-model="form.retreatTimeStr">
                        </el-input-number>

                      </el-form-item>
                    </el-col>
                    <el-col :span="3"
                      style="padding-top: 12px;margin-left: 20px;">
                      <el-checkbox v-model="form.check">退整张卡</el-checkbox>
                    </el-col>

                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="退款金币"
                        prop="retreatByBalanceStr"
                        style="margin-bottom: 10px"
                        label-width="102px">
                        <el-input-number style="width:100%;"
                          :precision="2"
                          :controls="false"
                          :step="0.1"
                          :min="0"
                          :max="this.maxMoney('1')"
                          v-model="form.retreatByBalanceStr">
                        </el-input-number>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="退款银币"
                        prop="retreatByRedBagStr"
                        style="margin-bottom: 10px"
                        label-width="102px">
                        <el-input-number style="width:100%;"
                          :precision="2"
                          :controls="false"
                          :step="0.1"
                          :min="0"
                          :max="this.maxMoney('2')"
                          v-model="form.retreatByRedBagStr">
                        </el-input-number>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="退卡备注"
                        prop="retreatRemark"
                        label-width="102px">
                        <el-input style="width:100%;"
                          v-model="form.retreatRemark">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>

              </el-tabs>

            </div>

          </div>
        </template>
      </el-form>
      <!-- <div class="dw">
        <el-button @click="colsePro" style="margin-top: 10px;margin-left: 40%;">关闭退卡</el-button>
        <el-button @click="colsePro" style="margin-top: 10px;">确认退卡</el-button>
      </div> -->
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="closeRow"
          style="margin-left: 40%;">关闭退卡</el-button>
        <el-button type="primary"
          v-if="!see"
          @click="submitForm">确认退卡</el-button>
      </span>
    </div>

  </div>
</template>

<script>
import {
  getBuyRecord, cardWithdrawal
} from "@/api/customerService/record";
import {
  checkPermi,
  checkRole
}
  from "@/utils/permission"; // 权限判断函数
import {
  selectOptions
}
  from "@/api/service/serviceCategory";

import imageArraySize from "@/components/ImageUpload/imageArraySize";
import videoUpload from "@/components/ImageUpload/videoUpload";
import sku from "@/components/sku/index"
import {
  getItem, addItem, editeItem, delSku
}
  from '@/api/service/item'

import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";

import selectedDevice from "@/components/Activity/SelectedDevice";
import commodityDevice from "@/components/Activity/commodityDevice";

export default {
  components: {
    imageArraySize,
    videoUpload,
    sku, selected,
    commodityStore, commodityDevice, selectedDevice
  },
  props: {
    uid: {
      type: Number,
      default: 0,
    }, serviceType: {
      type: String,
      default: '',
    },
    see: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      activeName: 'first',
      zIndex: 2000,
      itemUid: this.uid,
      storeOpen: false,
      serviceTypesList: [],
      selectedDataStore: [],
      deviceOpen: false,
      selectedDataDevice: [],
      indexs: 0,
      inputVisible: false,
      inputValue: '',
      roles: 0,
      roleRule: 0,
      // th 值；动态控制 th 标题、批量设置
      //规格名称和的值, 组件里面可以添加规格名称和值
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 商品类别
      categoryOptions: [],
      itemTypeOptions: [],

      // 更多的下拉
      displayBool: 0,
      // 查询参数
      queryParams: {},
      columns: [],
      // 表单参数
      form: {
        retreatRemark: ''
      },
      property: [],
      propertyUid: [],
      // 表单校验
      rules: {
        retreatTimeStr: [{
          required: true,
          message: "退卡次数不能为空",
          trigger: "blur"
        }],
        retreatByBalanceStr: [{
          required: true,
          message: "退款金币不能为空",
          trigger: "blur"
        }],
        retreatByRedBagStr: [{
          required: true,
          message: "退款银币不能为空",
          trigger: "blur"
        }],
      },
      datas: [],
      tables: [],
      notNor: 0, //第一次不发生变化
    };
  },
  created () {
    let $this = this

    getBuyRecord(this.uid).then(response => {
      this.form = response.data;
      if (!this.form.retreatRemark) this.form.retreatRemark = ''
      this.$set(this.form, 'retreatByRedBagStr', 0)
      this.$set(this.form, 'retreatByBalanceStr', 0)
    });


  },

  methods: {

    checkPermi,
    checkRole,
    maxMoney (type) {

      if (type == '1') {

        return (this.form.orderAmountStr * 100 - this.form.retreatByRedBagStr * 100) / 100

      } else {

        return (this.form.orderAmountStr * 100 - this.form.retreatByBalanceStr * 100) / 100
      }
    },
    maxMoneyArr (index, type) {
      let data = 0;
      this.form.childrenList.forEach((vo, ind) => {
        if (ind == index) {
          if (type == '1') {
            data += (vo.retreatByRedBagStr * 1)
          } else {
            data += (vo.retreatByBalanceStr * 1)
          }
        } else {
          data += (vo.retreatByRedBagStr * 1 + vo.retreatByBalanceStr * 1)
        }
      });

      // if (type == '1') {
      //   return this.form.orderAmountStr * 1 - this.form.retreatByRedBagStr * 1
      // } else {
      //   return this.form.orderAmountStr * 1 - this.form.retreatByBalanceStr * 1
      // }
      //
      // console.log((this.form.orderAmountStr * 100 - data*100)/100)
      return (this.form.orderAmountStr * 100 - data * 100) / 100;
    },
    closeRow () {
      this.$emit("multipleSelectionRow");
    },
    existValue (type) {
      let index = 0;
      if (this.form.checkList) {
        this.form.checkList.forEach(elemet => {
          if (elemet == type) {
            index++;
          }
        })
      }

      return index;
    },
    existValuePay (type) {
      let index = 0;
      if (this.form.checkListPay) {
        this.form.checkListPay.forEach(elemet => {
          if (elemet == type) {
            index++;
          }
        })
      }

      return index;
    },
    selectCommodityDevice () {
      this.$forceUpdate()
      this.deviceOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableDevice"].greet(this.selectedDataDevice);
      });
    },
    selectCommodity () {
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataStore);
      });
    },
    multipleSelectionDevice (data) {
      this.deviceOpen = false
      this.selectedDataDevice = data;
      this.$nextTick(() => {
        //this.$refs.childDevice.getList();
      });
    },
    multipleSelection (data) {
      this.storeOpen = false
      this.selectedDataStore = data;
      this.$nextTick(() => {
        ///this.$refs.childStore.getList();
      });
    },
    toCloseDeviceBox () {
      this.deviceOpen = false;
    },
    toCloseBox () {
      this.storeOpen = false;
    },
    indexMethod (index) {
      this.indexs = index
      return index * 1;
    },
    handleDelete (row, index) {
      console.log(index)
      if (row.skuId) {
        delSku(row.skuId).then(response => {
          this.form.proboxServiceItemSkus.splice(index, 1);

        })
      } else {
        this.form.proboxServiceItemSkus.splice(index, 1);

      }
    },
    handleAdd () {
      let data = {
        no: JSON.parse(JSON.stringify(this.indexs)),
        skuId: null,
        skuName: null,
        serviceItemId: null,
        itemPrice: 0,
        itemFavorablePrice: 0,
        itemSettlementPrice: 0,
        itemBoluoHuaPrice: 0,
        itemServiceDuration: 0,
        serviceTimes: 1,
      }
      this.form.proboxServiceItemSkus.push(data);
    },


    oninput (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
        if (str.indexOf(".") == str.length - 1) {
          str = str.substring(0, str.length - 1);
        }
      }
      return str
    },
    oninputs (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位

      }
      return str
    },
    // 表单重置
    reset () {
      this.form = {};
      this.resetForm("form");
    },
    divShow (obj) {
      this.displayBool = obj;
    },
    /**各种下拉框 */
    bulidSelect () {
      // 分类
      // selectOptions().then(response => {
      //   this.categoryOptions = response.data;
      // });
      this.getDicts("proBoxService_itemType").then(response => {
        this.itemTypeOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm () {

      this.$refs["form"].validate(valid => {

        if (valid) {
          if (this.serviceType == 'card') {
            if (this.activeName == 'first') {
              let data = 0;
              this.form.childrenList.forEach((vo, ind) => {
                if (vo.retreatTimeStr > 0) {
                  data++;
                }
                vo.retreatByBalance = vo.retreatByBalanceStr * 100
                vo.retreatByRedBag = vo.retreatByRedBagStr * 100
                vo.retreatTimeStr = vo.retreatTimeStr < 0 ? 0 : vo.retreatTimeStr

              });

              if (data == 0) {
                this.$message.error('退卡次数要大于0');
                return;
              }
            } else {
              if (this.form.check) {
                this.form.retreatTimeStr = this.form.isUnLimit == '1' ? 1 : this.form.times * 1 - this.form.subscribeTimes * 1
              }
              if (this.form.retreatTimeStr == 0) {
                this.$message.error('退卡次数要大于0');
                return;
              }
              this.form.cardWithdrawalType = '1';

            }

          } else {
            if (this.form.retreatTimeStr == 0) {
              this.$message.error('退卡次数要大于0');
              return;
            }
            this.form.cardWithdrawalType = '1';
          }

          this.form.retreatByBalance = this.form.retreatByBalanceStr * 100
          this.form.retreatByRedBag = this.form.retreatByRedBagStr * 100
          this.form.retreatTimeStr = this.form.retreatTimeStr < 0 ? 0 : this.form.retreatTimeStr
          cardWithdrawal(this.form).then(respone => {
            this.msgSuccess("退卡成功");
            this.closeRow();
          })

        }
      });
    },
    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/item",
        query: {
          t: Date.now()
        }
      });
    },
    handleClose (tag) {
      this.form.itemTagsArray.splice(this.form.itemTagsArray.indexOf(tag), 1);
    },

    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.itemTagsArray.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.el-form-item {
  margin-bottom: 0px;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.show-desc-txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 100%;
  margin: auto;
  margin-bottom: 30px;
  padding-bottom: 10px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 100%;
  margin: auto;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 100%;
  margin: auto;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style >
